import React, { useEffect, useState } from 'react';
import './index.less';
import peoOne from '@/config/img/peoOne.png';
import peoTwo from '@/config/img/peotwo.png';
import peoThr from '@/config/img/peoThr.png';
import workOne from '@/config/img/workOne.png';
import workTwo from '@/config/img/workTwo.png';
import workThree from '@/config/img/workThree.png';
import banner from '@/config/img/banner1.png';
import { useHistory } from 'umi';
import './index.less';
import Title from '../component/Title';
import { CSSTransition } from 'react-transition-group';

export default function index() {
  const history = useHistory();
  const [isVisible, setIsVisible] = useState(false);
  const [isCharacter, setIsCharacter] = useState(false);

  const actorList = [
    {
      title: '林奋',
      time: '1955年11月',
      src: peoOne,
      id: `1`,
      desc: '雷剧代表人物、第三批国家级非物质文化遗产项目窗剧代表性传承人',
      works: '代表作《失子惊疯》、《梁红玉挂帅》、《血焰》。',
    },
    {
      title: '金由英',
      time: '1938年6月',
      src: peoThr,
      id: `2`,
      desc: '雷剧代表人物、第三批国家级非物质文化遗产项目窗剧代表性传承人',
      works:
        '代表剧目《三看御妹》、《打金枝》、《挥泪斩侄孙》、《巾帼辨奸》、《乱点鸳鸯谱》。',
    },
    {
      title: '黄桂',
      time: '1955年11月',
      src: peoTwo,
      id: `3`,
      desc: '雷剧代表人物、第三批国家级非物质文化遗产项目窗剧代表性传承人',
      works:
        '国家一级演员，获第四、第六、第七届广东省中青年演艺大赛金奖、第四届全国少数民族戏剧汇演优秀演员奖。',
    },
  ];
  const workList = [
    {
      title: '雷剧作品：挖宝记',
      src: workOne,
      id: `1`,
      desc: '雷剧《血焰》讲述的是一九二七年的一个渔村女人黄玲氏含辛茹苦将三个孩子拉扯成人，自小教育他们长大要做一个顶天立地的男子汉，一定要将颠倒的不公平世界给颠倒过来。后几个儿子均投身战斗，两个儿子黄广元与黄广义为革命牺牲了自己。而后坚持数年斗争的农民自卫军，因叛徒告密，东海岛驻地被国民党反动派包围。黄玲氏为掩护同志们突围，毅然只身引开敌人，在紧要关头引爆了身上的手榴弹与敌人同归于尽。黄玲氏用生命为同志们争取了宝贵的时间',
    },
    {
      title: '雷剧作品：岭南圣母',
      id: `2`,
      src: workTwo,
      desc: '雷剧《血焰》讲述的是一九二七年的一个渔村女人黄玲氏含辛茹苦将三个孩子拉扯成人，自小教育他们长大要做一个顶天立地的男子汉，一定要将颠倒的不公平世界给颠倒过来。后几个儿子均投身战斗，两个儿子黄广元与黄广义为革命牺牲了自己。而后坚持数年斗争的农民自卫军，因叛徒告密，东海岛驻地被国民党反动派包围。黄玲氏为掩护同志们突围，毅然只身引开敌人，在紧要关头引爆了身上的手榴弹与敌人同归于尽。黄玲氏用生命为同志们争取了宝贵的时间',
    },
    {
      title: '雷剧作品：挖宝记',
      src: workThree,
      id: `3`,
      desc: '雷剧《血焰》讲述的是一九二七年的一个渔村女人黄玲氏含辛茹苦将三个孩子拉扯成人，自小教育他们长大要做一个顶天立地的男子汉，一定要将颠倒的不公平世界给颠倒过来。后几个儿子均投身战斗，两个儿子黄广元与黄广义为革命牺牲了自己。而后坚持数年斗争的农民自卫军，因叛徒告密，东海岛驻地被国民党反动派包围。黄玲氏为掩护同志们突围，毅然只身引开敌人，在紧要关头引爆了身上的手榴弹与敌人同归于尽。黄玲氏用生命为同志们争取了宝贵的时间',
    },
  ];
  const handleScroll = () => {
    const scrollPosition = window.scrollY;
    console.log(scrollPosition);

    scrollPosition > 130 && setIsCharacter(true);
  };
  useEffect(() => {
    setTimeout(() => {
      setIsVisible(true);
    }, 1040);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
  //演员
  const toPage = (val: any) => {
    history.push({
      pathname: '/actors',
      query: {
        id: val.id,
      },
    });
  };
  const toPageWork = (val: any) => {
    history.push({
      pathname: '/wroks',
      query: {
        id: val.id,
      },
    });
  };
  // 演员与作品
  return (
    <div className="actors-work">
      {/* 导航栏下图片 */}
      <div className="banner">
        <img src={banner} alt="" />
      </div>
      <CSSTransition
        in={isVisible} // 控制动画是否开始，true 表示开始动画
        timeout={5000} // 动画过渡的时间，单位毫秒
        classNames="fade" // 指定动画的 class 名称
        unmountOnExit // 动画退出时卸载组件
      >
        <div className="actor">
          {/* 封装的标题 */}
          <Title
            title="著名雷剧演员"
            enTitle="Famous thunder drama actor"
          ></Title>
          <div className="actor-content">
            {/* 著名演员 */}
            {actorList.map((val) => {
              return (
                <div className="actor-item">
                  <div className="top">
                    <div className="name">{val.title}</div>
                    <div className="time">{val.time}</div>
                  </div>
                  <img src={val.src} alt="" />
                  <div className="works">{val.works}</div>
                  <div className="desc">{val.desc}</div>
                  {/* 点击事件 */}
                  <div className="button" onClick={() => toPage(val)}>
                    更多相关
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </CSSTransition>
      <CSSTransition
        in={isCharacter} // 控制动画是否开始，true 表示开始动画
        timeout={5000} // 动画过渡的时间，单位毫秒
        classNames="fade" // 指定动画的 class 名称
        unmountOnExit // 动画退出时卸载组件
      >
        <div className="actor-works">
          <Title
            title="著名雷剧作品"
            enTitle="Famous thunder opera works"
          ></Title>
          <div className="works-content">
            <div className="content-ins">
              {workList.map((val) => {
                return (
                  <div className="works-item">
                    <div className="works-title">{val.title}</div>
                    <img src={val.src} alt="" />
                    <div className="desc">{val.desc}</div>
                    <div className="button" onClick={() => toPageWork(val)}>
                      更多相关
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </CSSTransition>
    </div>
  );
}
